<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>角色管理</title>
    <%--引入vue的js--%>
    <script type="text/javascript" src="/js/vue.js"></script>
    <%--引入elementui的js--%>
    <script type="text/javascript" src="/js/index.js"></script>
    <%--引入axios的js 发送异步请求--%>
    <script type="text/javascript" src="/js/axios.min.js"></script>
    <%--引入elementui的css--%>
    <link type="text/css" rel="stylesheet" href="/css/index.css">
</head>
<body>
<div id="app">
    <el-table
            :data="tableData"
            border
            style="width: 100%">
        <el-table-column
                fixed
                prop="roleid"
                label="编号"
        >
        </el-table-column>
        <el-table-column
                fixed
                prop="rolename"
                label="角色名"
        >
        </el-table-column>
        <el-table-column
                fixed
                prop="remark"
                label="描述"
        >
        </el-table-column>
        <el-table-column
                fixed
                prop="status"
                label="状态"
        >
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
        >
            <template slot-scope="scope">
                <el-button type="primary" size="small">编辑</el-button>
                <el-button type="danger" size="small">删除</el-button>
                <el-button type="danger" size="small" @click="updatePermission(scope.row.roleid)">修改权限</el-button>
            </template>
        </el-table-column>
    </el-table>

    <%--修改权限的对话框--%>
    <el-dialog
            title="修改权限"
            :visible.sync="dialogVisible"
            width="30%"
    >
        <%--data:绑定树形数据--%>
        <el-tree
                :data="data"
                show-checkbox
                node-key="mid"
                ref="tree"
                :default-expanded-keys="[2, 3]"
                :props="defaultProps">
        </el-tree>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="comfirm()">分配权限</el-button>
          </span>
    </el-dialog>
</div>
</body>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            data: [],
            defaultProps: {
                children: 'children',
                label: 'mname'
            },
            //默认选中的树形菜单
            checkIds:[],
            ///////////////////////////////////////////////////
            //表格数据
            tableData: [],
            //控制修改权限对话框的显示和隐藏
            dialogVisible: false,
            //表示被修改权限的角色id
            roleId:0,
        },
        created() {
            this.initTable();
        },
        methods: {
            //确认分配权限按钮事件
            comfirm(){
                  //1.为哪个角色id分配权限
                //alert("roleId======="+this.roleId);
                //2. 选中的权限id
                let checkIds=this.$refs.tree.getCheckedKeys();
                let halfCheckIds=this.$refs.tree.getHalfCheckedKeys();
                //js中如何合并两个数组
                var allIds = checkIds.concat(halfCheckIds);
                axios.post("/menu/fenQx?roleId="+this.roleId+"&ids="+allIds).then(result=>{
                     if(result.data.code==200){
                          //1.关闭对话框
                          this.dialogVisible=false;
                          //2.弹出分配菜单成功
                          this.$message.success(result.data.msg);
                     }
                })

            },
            //修改权限按钮事件
            updatePermission(roleid) {
                this.roleId=roleid;
                this.dialogVisible=true;
                //获取所有的菜单
                axios.get("/menu/list?roleid="+roleid).then(result=>{ //异步
                     this.data=result.data.data.list;
                     this.checkIds=result.data.data.list02;
                      setTimeout(() =>{
                        this.checkIds.forEach(value => {
                            this.$refs.tree.setChecked(value, true, false);
                        })}, 100)
                })
            },

            initTable() {
                axios.get("/role/list").then(result => {
                    this.tableData = result.data.data;
                })
            }
        }
    })
</script>
</html>
